<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 提示框组件配置
   */
  tooltip: {
    position: function (pos, params, el, elRect, size) {
      var obj = { top: 10 }
      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
      // console.log('obj', obj)
      return obj
    },
  },
  /**
   * 图表配置
   */
  series: [
    {
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [120, 200, 150, 80, 70, 110, 130],
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
